<template>
    <div class="timeline-container">
      <h3>{{ title }}</h3>
      <div class="timeline">
        <div v-for="(event, index) in events" :key="index"
             @mouseover="currentEventIndex = index"
             @mouseleave="currentEventIndex = null"
             class="timeline-item">
          <div class="event-text">
            {{ event.date }} - {{ event.description }}
          </div>
          <div v-if="currentEventIndex === index" class="event-image">
            <img :src="event.imageUrl" alt="历史图片" class="timeline-image">
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Timeline',
    props: {
      title: String,
      events: Array
    },
    data() {
      return {
        currentEventIndex: null // 当前悬停的事件索引
      };
    }
  }
  </script>
  
  <style scoped>
  .timeline-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .timeline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
  }
  
  .timeline-item {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
  }
  
  .event-text {
    flex: 1;
    padding: 10px;
    border-right: 1px solid #ccc;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  .event-text:hover {
    color: #adb300; /* 鼠标悬停时的文字颜色 */
  }
  
  .event-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .timeline-image {
    max-width: 60%;
    height: auto;
    border: 1px solid #ddd;
    transition: transform 0.3s ease;
  }
  
  .timeline-image:hover {
    transform: scale(1.7); /* 鼠标悬停时图片的缩放效果 */
  }
  </style>